import React, { Component } from 'react'
// state 是 StateCom 类实例化对象的一个属性
export default class StateCom extends Component {
  //方式一  构造方法
  // constructor(){
  //   //调用父类的构造方法
  //   super();

  //   //为实例对象添加 state 属性
  //   this.state = {
  //   }
  // }

  //方式二 
  state = {
    //count 
    count: 1
  }

  //渲染方法
  render() {
    //这里的 this 是指向实例对象的, 因为 render 方法是由实例对象调用的
    // console.log(this);
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={() => {
          // 更新状态值
          // this.state.count += 1;//是一种无效的更新  X
          //正确的方式  set 设置 state 状态. 当调用 setState 之后, 会更新 state 的值, 再次调用 render 方法进行重新渲染
          // setState √
          this.setState({
            count: this.state.count + 1
          });
        }}>新增</button>
      </div>
    )
  }
}
